<template>
  <div class="musiccreate">
    <h1>文章{{ id ? `编辑——${id}` : "创建" }}</h1>
    <br />
    <el-form label-width="120px" @submit.native.prevent="save()">
      <el-form-item label="文章ID">
        <el-input v-model="model.m_id"></el-input>
      </el-form-item>
      <el-form-item label="文章名">
        <el-input v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="model.artist"></el-input>
      </el-form-item>

      <el-form-item label="图片地址">
        <el-input v-model="model.pic_url"></el-input>
      </el-form-item>
      <el-form-item label="文章开头">
        <el-input v-model="model.core"></el-input>
      </el-form-item>
      <el-form-item label="文章内容">
        <vue-editor v-model="model.content"></vue-editor>
      </el-form-item>

      <el-form-item>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-button round type="primary" native-type="submit">
            保存
          </el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src
import { VueEditor } from "vue2-editor";
export default {
  name: "NewsCreate",
  components: {
    VueEditor,
  },
  props: {
    id: {},
  },
  data() {
    return {
      model: {},
    };
  },
  methods: {
    async save() {
      let res;
      if (this.id) {
        res = await this.$http.put(`rest/news/edit/${this.id}`, this.model);
      } else {
        res = await this.$http.post("rest/news/create", this.model);
      }
      this.$message({
        type: "success",
        message: "保存成功",
      });
      this.$router.push("/news/list");
    },
    async fetch() {
      const res = await this.$http.get(`rest/news/edit/${this.id}`);
      this.model = res.data;
    },
  },
  created() {
    this.id && this.fetch();
  },
};
</script>

<style scoped></style>
